<!DOCTYPE html>

<html style="height: 100%;">

<head>
    <meta charset="utf-8">
    <title>汇总统计图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        .laytable-cell-radio.layui-table-cell {
            padding: 0 5px 0 15px;
        }
        
        .laytable-cell-radio span {
            display: none;
        }
        
        .laytable-cell-radio .layui-form-radio {
            padding-right: 0;
            margin: 0;
        }
        
        .layui-table-cell {
            height: auto;
            line-height: 28px;
            padding: 0 15px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            box-sizing: border-box;
        }
    </style>
</head>

<body style="height: 95%;">
    <div class="layui-form" style="margin-left:20px;margin-top:15px;margin-bottom:20px">
        <div class="layui-form-item">
            <label class="layui-form-label">统计年份</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="datetime" placeholder="请选择需要统计的年份">
            </div>
            <button class="layui-btn layui-btn-normal" data-type="reload" id="serch">统计</button>

        </div>
    </div>
    <label class="layui-form-label" style="width: 250px;text-align: left" id="title"><b>(单位:吨)</b></label>
    <div id="main" style="height:70%;width:95%;margin-top: 20px"></div>
    <center>
        <table id="demo" lay-filter="test" style="height:25%;margin-top: 40px"></table>
    </center>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/layui/echarts.common.min.js"></script>
    <script src="../../layuiadmin/layui/jquery-3.3.1.min.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index']);
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            var myDate = new Date();
            var nowdate = myDate.toLocaleTimeString();
            //执行一个laydate实例
            laydate.render({
                elem: '#datetime', //指定元素
                type: 'year',
                min: '2014-01-01',
                max: nowdate,
                theme: '#1E9FFF'
            });
        });
        var myChart = echarts.init($('#main')[0]);
        //
        var option = {
            color: ['#5CACEE', '#F08080', '#00A851', '#FF8711', '#D7E522'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['感染性废物', '损伤性废物', '病理性废物', '药物性废物', '化学性废物']
            },
            grid: {
                left: '4%',
                right: '4%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    textStyle: {
                        fontSize: '15',
                        fontWeight: 'bold'
                    }
                },
                data: ['上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '桐庐县', '建德市', '富阳区', '临安区', '淳安县', '下沙经济开发区', '大江东经济开发区', '之江度假区']
            },
        };
        myChart.setOption(option);
        // 为echarts对象加载数据 
        $("#serch").on("click", function() {
            myChart.showLoading();
            var str = '<h3><b>' + $("#datetime").val() + '年统计情况(单位：吨)</b></h3>';
            $("#title").html(str);
            $.ajax({
                url: "../../../All/all4",
                type: "post",
                datatype: "json",
                data: {
                    date: $("#datetime").val()
                },
                success: function(res) {
                    myChart.hideLoading();
                    if (res.data) {
                        var num_0 = $.parseJSON(res.data['0']); //ganran
                        var num_1 = $.parseJSON(res.data['1']); //res.data[1];sunshang
                        var num_2 = $.parseJSON(res.data['3']); // res.data[2];yaowu
                        var num_4 = $.parseJSON(res.data['2']); // res.data[3];bingli
                        var num_3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; //huaxue
                        option = {
                            series: [{
                                name: '感染性废物',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'top',
                                        textStyle: {
                                            fontSize: '13',
                                            fontFamily: '微软雅黑',
                                            color: 'black'
                                        }
                                    }
                                },
                                data: num_0
                            }, {
                                name: '损伤性废物',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'top',
                                        textStyle: {
                                            fontSize: '13',
                                            fontFamily: '微软雅黑',
                                            color: 'black'
                                        }
                                    }
                                },
                                data: num_1
                            }, {
                                name: '病理性废物',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'top',
                                        textStyle: {
                                            fontSize: '13',
                                            fontFamily: '微软雅黑',
                                            color: 'black'
                                        }
                                    }
                                },
                                data: num_2
                            }, {
                                name: '药物性废物',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'top',
                                        textStyle: {
                                            fontSize: '13',
                                            fontFamily: '微软雅黑',
                                            color: 'black'
                                        }
                                    }
                                },
                                data: num_4
                            }, {
                                name: '化学性废物',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'top',
                                        textStyle: {
                                            fontSize: '13',
                                            fontFamily: '微软雅黑',
                                            color: 'black'
                                        }
                                    }
                                },
                                data: num_3
                            }]
                        };
                        myChart.setOption(option);
                        var json = [];
                        var x0 = 0;
                        var x1 = 0;
                        var x2 = 0;
                        var x4 = 0;
                        for (var i = 0; i < 16; i++) {
                            x0 += parseFloat(num_0[i]);
                            x1 += parseFloat(num_1[i]);
                            x2 += parseFloat(num_2[i]);
                            x4 += parseFloat(num_4[i]);
                        }
                        json.push({
                            "name": "上城区",
                            "grx": num_0[0],
                            "ssx": num_1[0],
                            "blx": num_2[0],
                            "ywx": num_4[0],
                            "hxx": 0
                        });
                        json.push({
                            "name": "下城区",
                            "grx": num_0[1],
                            "ssx": num_1[1],
                            "blx": num_2[1],
                            "ywx": num_4[1],
                            "hxx": 0
                        });
                        json.push({
                            "name": "江干区",
                            "grx": num_0[2],
                            "ssx": num_1[2],
                            "blx": num_2[2],
                            "ywx": num_4[2],
                            "hxx": 0
                        });
                        json.push({
                            "name": "拱墅区",
                            "grx": num_0[3],
                            "ssx": num_1[3],
                            "blx": num_2[3],
                            "ywx": num_4[3],
                            "hxx": 0
                        });
                        json.push({
                            "name": "西湖区",
                            "grx": num_0[4],
                            "ssx": num_1[4],
                            "blx": num_2[4],
                            "ywx": num_4[4],
                            "hxx": 0
                        });
                        json.push({
                            "name": "滨江区",
                            "grx": num_0[5],
                            "ssx": num_1[5],
                            "blx": num_2[5],
                            "ywx": num_4[5],
                            "hxx": 0
                        });
                        json.push({
                            "name": "萧山区",
                            "grx": num_0[6],
                            "ssx": num_1[6],
                            "blx": num_2[6],
                            "ywx": num_4[6],
                            "hxx": 0
                        });
                        json.push({
                            "name": "余杭区",
                            "grx": num_0[7],
                            "ssx": num_1[7],
                            "blx": num_2[7],
                            "ywx": num_4[7],
                            "hxx": 0
                        });
                        json.push({
                            "name": "桐庐县",
                            "grx": num_0[8],
                            "ssx": num_1[8],
                            "blx": num_2[8],
                            "ywx": num_4[8],
                            "hxx": 0
                        });
                        json.push({
                            "name": "建德市",
                            "grx": num_0[9],
                            "ssx": num_1[9],
                            "blx": num_2[9],
                            "ywx": num_4[9],
                            "hxx": 0
                        });
                        json.push({
                            "name": "富阳区",
                            "grx": num_0[10],
                            "ssx": num_1[10],
                            "blx": num_2[10],
                            "ywx": num_4[10],
                            "hxx": 0
                        });
                        json.push({
                            "name": "临安区",
                            "grx": num_0[11],
                            "ssx": num_1[11],
                            "blx": num_2[11],
                            "ywx": num_4[11],
                            "hxx": 0
                        });
                        json.push({
                            "name": "淳安县",
                            "grx": num_0[12],
                            "ssx": num_1[12],
                            "blx": num_2[12],
                            "ywx": num_4[12],
                            "hxx": 0
                        });
                        json.push({
                            "name": "下沙经济开发区",
                            "grx": num_0[13],
                            "ssx": num_1[13],
                            "blx": num_2[13],
                            "ywx": num_4[13],
                            "hxx": 0
                        });
                        json.push({
                            "name": "大江东经济开发区",
                            "grx": num_0[14],
                            "ssx": num_1[14],
                            "blx": num_2[14],
                            "ywx": num_4[14],
                            "hxx": 0
                        });
                        json.push({
                            "name": "之江度假区",
                            "grx": num_0[15],
                            "ssx": num_1[15],
                            "blx": num_2[15],
                            "ywx": num_4[15],
                            "hxx": 0
                        });
                        json.push({
                            "name": "合计",
                            "grx": x0,
                            "ssx": x1,
                            "blx": x2,
                            "ywx": x4,
                            "hxx": 0
                        });

                        layui.use('table', function() {
                            var table = layui.table;
                            var $ = layui.$;
                            table.render({
                                elem: '#demo',
                                // height: 'full',
                                limit: 17,
                                data: json,
                                cols: [
                                    [
                                        //表头
                                        {
                                            field: 'name',
                                            title: '县城区',
                                            width: '10%',
                                            align: 'center'

                                        }, {
                                            field: 'grx',
                                            title: '感染性废物',
                                            width: '10%',
                                            align: 'center',
                                            templet: function(d) {
                                                return d.grx.toFixed(2)
                                            }
                                        }, {
                                            field: 'ssx',
                                            title: '损伤性废物',
                                            width: '10%',
                                            align: 'center',
                                            templet: function(d) {
                                                return d.ssx.toFixed(2)
                                            }
                                        }, {
                                            field: 'blx',
                                            title: '病理性废物',
                                            width: '10%',
                                            align: 'center',
                                            templet: function(d) {
                                                return d.blx.toFixed(2)
                                            }
                                        }, {
                                            field: 'ywx',
                                            title: '药物性废物',
                                            width: '10%',
                                            align: 'center',
                                            templet: function(d) {
                                                return d.ywx.toFixed(2)
                                            }
                                        }, {
                                            field: 'hxx',
                                            title: '化学性废物',
                                            width: '10%',
                                            align: 'center',
                                            templet: function(d) {
                                                return d.hxx.toFixed(2)
                                            }
                                        }
                                    ]
                                ],
                                skin: 'row' //表格风格
                                    ,
                                even: true
                            });
                            $("table th").css({
                                "background": "#1E9FFF",
                                "color": "white"
                            });
                        })
                    }
                }
            });


        })
    </script>
</body>

</html>